<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-row>
        <el-col>
          <el-form-item label="微信公众号原始ID" prop="officialOriginAppId">
            <div class="flex-align-center">
              <el-input v-model="form.officialOriginAppId" placeholder="请输入微信公众号原始ID" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="微信公众号ID" prop="officialAppId">
            <div class="flex-align-center">
              <el-input v-model="form.officialAppId" placeholder="请输入微信公众号ID" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="微信公众号密钥" prop="officialSecret">
            <div class="flex-align-center">
              <el-input v-model="form.officialSecret" placeholder="请输入微信公众号密钥" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="前端网页域名" prop="officialDomain">
            <div class="flex-align-center">
              <el-input v-model="form.officialDomain" placeholder="请输入前端网页域名" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[尾部不要加 / ]</el-link>
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="border-bottom mgb15"></div>
      <el-row>
        <el-col>
          <el-form-item label="微信原始小程序ID" prop="wxMpOriginAppId">
            <div class="flex-align-center">
              <el-input v-model="form.wxMpOriginAppId" placeholder="请输入微信原始小程序ID" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="微信小程序ID" prop="wxMpAppId">
            <div class="flex-align-center">
              <el-input v-model="form.wxMpAppId" placeholder="请输入微信小程序ID" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="微信小程序密钥" prop="wxMpSecret">
            <div class="flex-align-center">
              <el-input v-model="form.wxMpSecret" placeholder="请输入微信小程序密钥" maxlength="200" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">请勿随意更改，更改会影响用户注册和支付</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="reset">重 置</el-button>
    </div>
  </div>
</template>

<script>

import { getConfigProgram, saveConfigProgram } from "@/api/market/configProgram";
export default {
  name: 'ConfigProgram',
  components: {

  },
  data() {
    return {
      // 表单参数
      form: {
        shopId: "",
        officialOriginAppId: "",
        officialAppId: "",
        officialSecret: "",
        officialDomain: "",
        wxMpOriginAppId: "",
        wxMpAppId: "",
        wxMpSecret: "",
      },
      // 表单校验
      rules: {
        officialDomain: [
          { required: true, trigger: "blur", message: "请输入前端网页域名" },
        ],
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let shopId = '';
      if (process.env.NODE_ENV === 'development') {
        shopId = 'haidiyao'
      } else {
        shopId = window.location.hostname.split(".")[0];
      }
      getConfigProgram({ shopId: shopId }).then(response => {
        let p = { ...this.form }
        this.form = { ...p, ...response.data }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        shopId: "",
        officialOriginAppId: "",
        officialAppId: "",
        officialSecret: "",
        officialDomain: "",
        wxMpOriginAppId: "",
        wxMpAppId: "",
        wxMpSecret: "",
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          if (process.env.NODE_ENV === 'development') {
            params.shopId = 'haidiyao'
          } else {
            params.shopId = window.location.hostname.split(".")[0];
          }
          saveConfigProgram(params).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.width100 {
  width: 100px;
}

.width300 {
  width: 300px;
}
</style>
